<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>上传成功</title>
    <link rel="stylesheet" th:href="@{/layui/css/admin.css}">
    <script th:src="@{/js/echarts.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/echarts-gl.min.js}" type="text/javascript"></script>
</head>
<head th:replace="components/head::head">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html, body {
        width: 100%;
        height: 100%;
    }

    a {
        text-decoration: underline;
    }
</style>
<body>
<form class="layui-form" th:action="@{/query}" method="post"
      style="height: 80px;display: flex;justify-content: center;">
    <div class="layui-form-mid">
        <label class="layui-form-label">查重编号</label>
        <div class="layui-input-inline">
            <input type="text" name="recheckNo" required lay-verify="required" placeholder="请输入查重编号"
                   autocomplete="off"
                   class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
        </div>
        <a th:href="@{/}" style="color: #009688;margin-left: 50px">回到首页</a>
    </div>
</form>
<div id="echarts_content" th:if="${recheckComplete}" style="margin: 0 auto 0 auto;text-align: center;">
    <a th:href="@{/download(recheckNo=${recheckNo})}" style="color: red;margin-left: 60px"
       target="_blank">查重结果Excel下载</a>
    <div id="echarts" style="width:100%;height: 95%;"></div>
    <script>
        let height = document.body.clientHeight - 100;
        document.getElementById("echarts_content").style.height = height + "px";
        document.getElementById("echarts_content").style.width = height + "px";
        let chart_echarts = echarts.init(
            document.getElementById('echarts')
            , 'white'
            , {renderer: 'canvas'});
        let option_echarts = {
            "color": [
                "#c23531",
                "#2f4554",
                "#61a0a8",
                "#d48265",
                "#749f83",
                "#ca8622",
                "#bda29a",
                "#6e7074",
                "#546570",
                "#c4ccd3",
                "#f05b72",
                "#ef5b9c",
                "#f47920",
                "#905a3d",
                "#fab27b",
                "#2a5caa",
                "#444693",
                "#726930",
                "#b2d235",
                "#6d8346",
                "#ac6767",
                "#1d953f",
                "#6950a1",
                "#918597"
            ],
            "series": [
                {
                    "type": "scatter3D",
                    "data": [(${result})],
                    "label": {
                        "show": false,
                        "position": "top",
                        "margin": 8,
                        "fontSize": 12
                    }
                }
            ],
            "legend": [
                {
                    "data": [
                        ""
                    ],
                    "selected": {},
                    "show": true
                }
            ],
            "tooltip": {
                "show": true,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "textStyle": {
                    "fontSize": 14
                },
                "borderWidth": 0
            },
            "visualMap": {
                "type": "continuous",
                "min": 0,
                "max": 1,
                "inRange": {
                    "color": [
                        "#313695",
                        "#4575b4",
                        "#74add1",
                        "#abd9e9",
                        "#e0f3f8",
                        "#ffffbf",
                        "#fee090",
                        "#fdae61",
                        "#f46d43",
                        "#d73027",
                        "#a50026"
                    ]
                },
                "calculable": true,
                "splitNumber": 5,
                "orient": "vertical",
                "showLabel": true
            },
            "xAxis3D": {
                "nameGap": 20,
                "type": "category",
                "axisLabel": {
                    "margin": 8
                }
            },
            "yAxis3D": {
                "nameGap": 20,
                "type": "category",
                "axisLabel": {
                    "margin": 8
                }
            },
            "zAxis3D": {
                "nameGap": 20,
                "type": "value",
                "axisLabel": {
                    "margin": 8
                }
            },
            "grid3D": {
                "boxWidth": 200,
                "boxHeight": 100,
                "boxDepth": 80,
                "viewControl": {
                    "autoRotate": false,
                    "autoRotateSpeed": 10,
                    "rotateSensitivity": 1
                }
            }
        };
        chart_echarts.setOption(option_echarts);
    </script>
</div>
<script th:if="${recheckComplete == false}">
    layer.alert("[(${msg})]");
</script>
</body>
</html>